<template>
  <div class="expertInfoItem">
    <div class="expertImageBox">
      <img :src="expertInfo.picture" alt="" />
    </div>
    <h2 class="expertname">{{ expertInfo.name }}</h2>
    <p class="expertintroduce" v-html="expertInfo.profession"></p>
  </div>
</template>

<script>
export default {
  props: {
    expertInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.expertInfoItem {
  border: 1px solid #ccc;
  box-shadow: 0px 0px 6px #aaa;
}

.expertImageBox {
  margin: 30px auto;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}
.expertImageBox img {
  width: 100%;
  display: block;
  /* margin: 20px auto; */
}
.expertname {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}

.expertintroduce {
  font-size: 15px;
  color: #888;
  margin: 40px auto;
  text-align: center;
  line-height: 25px;
}
@media screen and (max-width: 768px) {
  .expertImageBox {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
  }
  .expertImageBox img {
    padding-left: 0px;
  }
  .expertintroduce {
    margin: 20px auto;
  }
}
</style>
